<template>
  <el-card class="a">
    <el-row :gutter="20" class="d">
      <el-col :span="8">
        <img src="~@/assets/cat.jpg" class="b" />
      </el-col>
      <el-col :span="10">
        <el-form :model="talentData" label-width="80px" class="c">
          <el-form-item label="姓名">
            <el-input v-model="talentData.name"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="talentData.sex"></el-input>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-input v-model="talentData.birthdate"></el-input>
          </el-form-item>
          <el-form-item label="公司部门">
            <el-input v-model="talentData.depart"></el-input>
          </el-form-item>
          <el-form-item label="职位">
            <el-input v-model="talentData.pos"></el-input>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model="talentData.phoneNum"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row align="top" justify="center" style="height: 120px">
      <span style="font-size: 20px;vertical-align: top;">离职原因</span>
      <el-input
        type="textarea"
        :rows="4"
        placeholder="请输入内容"
        v-model="talentData.reason"
        style="width: 600px">
      </el-input>
    </el-row>
    <el-row  :gutter="20" style="height: 70px">
      <el-col :span="3">
        <span style="font-size: 20px;">离职时间</span>
      </el-col>
      <el-col :span="6">
        <el-date-picker
          v-model="talentData.date"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="height: 70px">
      <el-col :span="5">
        <span style="font-size: 20px;vertical-align: top;">相关证明材料</span>
      </el-col>
      <el-col :span="5">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList">
          <el-button size="small" type="primary">上传图片</el-button>
        </el-upload>
      </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col offset="20">
          <el-button type="primary">提交审核</el-button>
        </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  data () {
    return {
      talentData:[
        {
          name: '小明',
          set: true,
          birthdate: '1991.2.3',
          depart: '开发部',
          pos: 'C++开发工程师',
          phoneNum: '13532675892',
          reason: '感觉自己比较菜',
          date: ''
        }
      ],
      fileList: [
        {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
       {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
      ]
    }
  },
  methods: {
    handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
  }
}
</script>

<style lang="less" scoped>
.a {
  height: 100%;
  width: 100%;
}
.b {
  height: 350px;
  width: 300px;
}
.c {
  width: 300px;
}
.d {
  height: 400px;;
}
</style>